<!-- 标题 -->
<template>
  <view class="c-title">
    <view class="c-title__main">
      <text>{{ title }}</text>
      <image src="@/assets/images/title-line.png" mode="scaleToFill" />
    </view>

    <view class="c-title__subtitle">{{ subtitle }}</view>
  </view>
</template>

<script lang="ts" setup>
  defineProps({
    title: {
      type: String,
      default: '我是标题',
    },
    subtitle: {
      type: String,
      default: '',
    },
  });
</script>

<style lang="scss" scoped>
  .c-title {
    &__main {
      font-size: 48rpx;
      font-weight: 600;
      color: #2e0f06;
      padding: 0rpx 40rpx 12rpx 0;
      display: inline-block;
      position: relative;

      image {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 236rpx;
        height: 42rpx;
        z-index: -1;
      }
    }
    &__subtitle {
      font-size: 24rpx;
      font-weight: 400;
      color: #2e0f06;
    }
  }
</style>
